import React,{memo,useState} from 'react'
import '../../assets/Layout/shezhi.scss'
import SzListItem from './mode/szListItem'
import TongYong from './mode/tongYong'
import XiaoXi from './mode/xiaoXi'
import CunChu from './mode/cunChu'
import KuaiJie from './mode/kuaiJie'
import QuanXian from './mode/quanXian'
import DengLu from './mode/dengLu'

function  SheZhi(){
  const [meunIndex,setMeunIndex] = useState(0)
  const meunList = [
                  {
                                   icon:"mt-huakuai",
                                  index:0,
                                  name:"通用"
                   },
                  {
                    icon:"mt-xiaoxi-01",
                    index:1,
                    name:"消息通知"
                  },
                  {
                    icon:"mt-cunchu",
                    index:2,
                    name:"存储管理"
                  },
                  {
                    icon:"mt-kuaijiejian",
                    index:3,
                    name:"快捷键"
                  },
                  {
                    icon:"mt-quanxian",
                    index:4,
                    name:"权限设置"
                  },
                  {
                    icon:"mt-denglushezhi",
                    index:5,
                    name:"登录设置"
                  }
                ]
  const [title,setTitle] = useState('通用')
  const onMeun = (index,item)=>{
    setMeunIndex(index);
    setTitle(item.name)
  }

  const list = meunList.map(cxt=> <SzListItem
    onMeun={(index,item)=>onMeun(index,item)}
    meunIndex={meunIndex}
    key={cxt.index}
    props={{
      name:cxt.name,
      icon:cxt.icon,
      index:cxt.index}}></SzListItem>);
  return <>
      <div className="sz-main">
         <div className="sz-main-box">
           <div className="sz-box-l">
             <div className="sz-top"></div>
              <div className="sz-l-main">
                  <div className="sz-l-list">
                    {list}
                  </div>
              </div>

           </div>
           <div className="sz-box-r">
             <div className="sz-r-top">
               <div className="sz-r-title">{title}</div>
             </div>
             {
               meunIndex === 0 ?   <TongYong></TongYong> :
               meunIndex === 1 ? <XiaoXi></XiaoXi> :
               meunIndex === 2  ?  <CunChu></CunChu> :
               meunIndex === 3 ? <KuaiJie></KuaiJie> :
               meunIndex === 4 ?    <QuanXian></QuanXian> :
               meunIndex === 5 ? <DengLu></DengLu> :''
             }
           </div>

         </div>
      </div>
  </>;
}



export default  memo(SheZhi);

